<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>智慧工地大屏系统</title>
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" href="./css/head.css">
		<link rel="stylesheet" href="./css/index.css">
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="wrap" id="wrap">
			<!-- header start -->
			<div class="header">
				<div class="time">
					<span id="time"></span>
				</div>
				<div class="login">
					用户1234234
				</div>
			</div>
			<!-- header end -->
			<!-- main start -->
			<div class="main clearfix w-m">
				<!-- 导航 -->				
				<div class="wrap clearfix">
					<div class="clearfix">
						<!-- 左边 -->
						<div class="leftDiv fl">
							<div class="box box1 clearfix">
								<div class="txt">
									<p id="online">0</p>
									<p>当前在线</p>
								</div>
								<div class="chat">
									<div id="pie" style="width: 100%; height: 100%;"></div>
								</div>
								<div class="txt">
									<p id="equipment" class="col">18</p>
									<p>设备数量</p>
								</div>
							</div>
							<div class="box box2">
								<video id="video" controls src="https://vt1.doubanio.com/202311242002/61c8bb95faf9425fa13b63f4a90b63c9/view/movie/M/402410374.mp4"></video>
							</div>
							
						</div>
						<!-- 中间 -->
						<div class="centerDiv fl">
							<div class="box box1">
								<div class="title clearfix">
									<p>
										<img src="img/page1/tit1.png" alt="">
										设备信息
									</p>									
								</div>
								<div class="content">
									<div class="filter">
										<span>设备名称</span>
										<select name="" id="filter">
											<option value="0">1#升降机</option>
											<option value="1">3#升降机</option>
										</select>
									</div>
									<ul class="clearfix">
										<li>
											<img src="img/page1/x1.png" alt="">
											<span>设备型号</span>
											<span id="shebei1">JL-010132</span>
										</li>
										<li>
											<img src="img/page1/x2.png" alt="">
											<span>最大值重力矩</span>
											<span id="shebei2">32</span>
										</li>
										<li>
											<img src="img/page1/x1.png" alt="">
											<span>设备型号</span>
											<span id="shebei3">JL-010132</span>
										</li>
										<li>
											<img src="img/page1/x2.png" alt="">
											<span>最大值重力矩</span>
											<span id="shebei4">32</span>
										</li>
									</ul>
								</div>
							</div>
							<div class="box box2 clearfix">
								<div class="content1 fl">
									<img src="img/page1/tadiao.png" >
									<div class="line">
										<p id="t-height1"></p>
										<img src="img/page1/t1.png" class="t1">
										<span><span id="ta1"></span>m</span>
									</div>		
									<div class="zhu">
										<div class="t2" id="t-height2">
											<p><span id="ta2"></span>m</p>
											<img src="img/page1/t2.png">
										</div>										
									</div>									
								</div>
								<div class="content2 fl">
									<div class="name">回转角度</div>
									<div class="biao">
										<img src="img/page1/zhen.png" class="zhen">
									</div>
									<div class="data">
										<p>风速：<span id="ta3">1.35</span>s/m</p>
										<p>转角：<span id="ta4">20</span>°</p>
									</div>
								</div>
							</div>
						</div>
						<!-- 右边 -->
						<div class="rightDiv fl">
							<div class="box box1">
								<div class="title clearfix">
									<p>
										<img src="img/page1/tit2.png" style="margin-top: -3px;" alt="">
										告警信息
									</p>
									<p><a href="#">更多</a></p>
								</div>
								<div class="content">
									<div class="top clearfix">
										<div class="yujing">
											<p>预警数量</p>
											<p id="yujing">15</p>
										</div>
										<div class="img"><img src="img/page1/deng.png" ></div>
										<div class="baojing">
											<p>报警数量</p>
											<p class="col" id="baojing">22</p>
										</div>
									</div>
									<div class="list">
										<ul class="scroll" id="baojingList">
											<li>
												<img src="img/page1/deng1.png" class="fl">
												<span class="fl">高度报警，报警边12.1m</span>
												<span class="fr">2023-11-21  10:56:03</span>
											</li>
											<li>
												<img src="img/page1/deng1.png" class="fl">
												<span class="fl">高度报警，报警边12.1m</span>
												<span class="fr">2023-11-21  10:56:03</span>
											</li>
											<li>
												<img src="img/page1/deng1.png" class="fl">
												<span class="fl">高度报警，报警边12.1m</span>
												<span class="fr">2023-11-21  10:56:03</span>
											</li>
											<li>
												<img src="img/page1/deng1.png" class="fl">
												<span class="fl">高度报警，报警边12.1m</span>
												<span class="fr">2023-11-21  10:56:03</span>
											</li>
											<li>
												<img src="img/page1/deng1.png" class="fl">
												<span class="fl">高度报警，报警边12.1m</span>
												<span class="fr">2023-11-21  10:56:03</span>
											</li>
											<li>
												<img src="img/page1/deng1.png" class="fl">
												<span class="fl">高度报警，报警边12.1m</span>
												<span class="fr">2023-11-21  10:56:03</span>
											</li>
											<li>
												<img src="img/page1/deng1.png" class="fl">
												<span class="fl">高度报警，报警边12.1m</span>
												<span class="fr">2023-11-21  10:56:03</span>
											</li>
										</ul>
									</div>
									
								</div>
							</div>
							
							<div class="box box2">								
								<div class="title clearfix">
									<p>
										<img src="img/page1/tit2.png" style="margin-top: -3px;" alt="">
										警告趋势图
									</p>
								</div>
								<div class="content">
									<div id="line" style="width: 100%;height: 260px;"></div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="bot">
						<ul class="clearfix">
							<li>
								<div class="clearfix top">
									<img src="img/page1/icon1.png" alt="">
									<div class="txt">
										<p>幅度</p>
										<p><span id="fudu">52.4</span>m</p>
									</div>
								</div>
								<div class="bar"></div>
							</li>
							<li>
								<div class="clearfix top">
									<img src="img/page1/icon2.png" alt="">
									<div class="txt">
										<p>高度</p>
										<p><span id="gaodu">52.4</span>m</p>
									</div>
								</div>
								<div class="bar"></div>
							</li>
							<li>
								<div class="clearfix top">
									<img src="img/page1/icon3.png" alt="">
									<div class="txt">
										<p>风速</p>
										<p><span id="fengsu">52.4</span>m/s</p>
									</div>
								</div>
								<div class="bar"></div>
							</li>
							<li>
								<div class="clearfix top">
									<img src="img/page1/icon4.png" alt="">
									<div class="txt">
										<p>吊重</p>
										<p><span id="diaozhong">52.4</span>t</p>
									</div>
								</div>
								<div class="bar"></div>
							</li>
							<li>
								<div class="clearfix top">
									<img src="img/page1/icon5.png" alt="">
									<div class="txt">
										<p>力矩比</p>
										<p><span id="liju">52.4</span>t</p>
									</div>
								</div>
								<div class="bar"></div>
							</li>
							<li>
								<div class="clearfix top">
									<img src="img/page1/icon6.png" alt="">
									<div class="txt">
										<p>荷载比</p>
										<p><span id="hezai">52.4</span>%</p>
									</div>
								</div>
								<div class="bar"></div>
							</li>
							<li>
								<div class="clearfix top">
									<img src="img/page1/icon7.png" alt="">
									<div class="txt">
										<p>转角</p>
										<p><span id="zhuanjiao">52.4</span>°</p>
									</div>
								</div>
								<div class="bar"></div>
							</li>
							<li>
								<div class="clearfix top">
									<img src="img/page1/icon8.png" alt="">
									<div class="txt">
										<p>倾角</p>
										<p><span id="qingjiao">52.4</span>°</p>
									</div>
								</div>
								<div class="bar"></div>
							</li>
						</ul>
					</div>
				</div>
				
			</div>
			<!-- main end -->
		</div>
		
	</body>
</html>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script src="js/echarts-gl.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
	// 自动改变分辨率
	function setRem() {
	 let vW = window.innerWidth / 1920;
		let vH = window.innerHeight / 1080;
		document.getElementById('wrap').style.transform = "scale(" + vW + "," + vH + ")"
	}
	setRem();
	window.onresize = function() {
		setRem()
	};
	
	// 时钟
	formDate('time')
	
	// 除警报外其他
	init(datas[0])
	// 警报
	init1(datas[0])
	
	
	// 除警报外其他
	function init(res){
		randerBox1(res.data1)
		randerBox2(res.videoUrl)
		randerBox3(res.data2)
		randerBox4(res.data3)		
		randerBox6(res.data6)
	}	
	// 警报
	function init1(res){
		randerBox5(res.data4)
		line(res.data5, 'line')
	}
	// 下拉选择设备
	$('#filter').change(function(){
		init(datas[$('#filter').val()])
	})
	
	// 定时刷新
	setInterval(()=>{
		var index=parseInt( Math.random()*2)
		init(datas[index])
		init1(datas[index])
	},60*1000)
	
</script>
